<script setup lang="ts">
import {computed, ref} from 'vue'
import H1 from "../../components/H1.vue";
import searchA from '../Order/searchA.vue';
import useStore from '../../modules/store/proOrder.ts';
import TableA from "../../components/Order/TableA.vue";
  let store = useStore()
const radioStyle= {
  height: '120px',
  width: '9%',
  background: '#fff',
  borderRadius: '15px',
  display: "flex",
  justifyContent: "center"
}
const radio = computed(() => store.radio)
const onChange = (val: string) => {
  console.log(val)
  store.alterA(val)
};
</script>

<template>
  <H1>
    <template v-slot:title>订单管理</template>
    <template v-slot:subheading>--商品订单</template>
  </H1>
  <searchA></searchA>
  <el-radio-group v-model="radio" @change="onChange" style="display: flex" :default-value="'全部订单'">
    <el-radio :style="radioStyle" label="全部订单">
      <span class="span">全部订单</span>
      <div class="image">
        <img v-if="radio!=='全部订单'" src="/img/FullOrder.png" alt="111">
        <img v-else src="/img/FullOrder-active.png" alt="222">
      </div>
    </el-radio>
    <el-radio :style="radioStyle" label="待付款">
      <span class="span">待付款</span>
      <div class="image">
        <img v-if="radio!=='待付款'" src="/img/due.png" alt="111">
        <img v-else src="/img/due-active.png" alt="222">
      </div>
    </el-radio>
    <el-radio :style="radioStyle" label="待发货">
      <span class="span">待发货</span>
      <div class="image">
        <img v-if="radio!=='待发货'" src="/img/stayDeliver.png" alt="111">
        <img v-else src="/img/stayDeliver-active.png" alt="222">
      </div>
    </el-radio>
    <el-radio :style="radioStyle" label="已发货">
      <span class="span">已发货</span>
      <div class="image">
        <img v-if="radio!=='已发货'" src="/img/hasDeliver.png" alt="111">
        <img v-else src="/img/hasDeliver-active.png" alt="222">
      </div>
    </el-radio>
    <el-radio :style="radioStyle" label="已完成">
      <span class="span">已完成</span>
      <div class="image">
        <img v-if="radio!=='已完成'" src="/img/complete.png" alt="111">
        <img v-else src="/img/complete-active.png" alt="222">
      </div>
    </el-radio>
    <el-radio :style="radioStyle" label="已取消">
      <span class="span">已取消</span>
      <div class="image">
        <img v-if="radio!=='已取消'" src="/img/Cancel.png" alt="111">
        <img v-else src="/img/Cancel-active.png" alt="222">
      </div>
    </el-radio>
  </el-radio-group>
  <TableA></TableA>
</template>

<style scoped lang="scss">

</style>
